import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import moment from 'moment';
import { CommonTable } from 'components';
import { overdueBackRecordAction } from './index';
import SearchList from './SearchList/SearchList';

const convertParams = (obj) => {
    const { time, phoneNo, name, orderNo, payType, backType } = obj;
    const isArr = Array.isArray(time) && time.length > 0;
    //todo 核对参数
    return {
        startTime: isArr ? time[0].format('YYYY-MM-DD HH:mm:ss') : '',
        endTime: isArr ? time[1].format('YYYY-MM-DD HH:mm:ss') : '',
        userPhone: phoneNo,
        userTrueName: name,
        orderNo,
        payId: payType,
        state: backType
    }
}

const backTypeObj = {
    // "1": "还款",
    // "2": "延长履约期",
    // "3": "正常全款",
    // "4": "正常部分",
    "5": "逾期全款",
    "6": "逾期部分",
    "7": "减免还款"
};


class OverdueBackRecord extends Component {
    //todo 核对字段
    columns = [
        {
            title: '还款时间',
            dataIndex: 'payTime',
            key: 'payTime',
            render(text) {
                return moment(Number(text) * 1000).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
        { title: '姓名', dataIndex: 'userName', key: 'userName' },
        { title: '手机号', dataIndex: 'phoneNo', key: 'phoneNo' },
        { title: '支付方式', dataIndex: 'payName', key: 'payName' },
        {
            title: '还款类型',
            dataIndex: 'state',
            key: 'state',
            render(text) {
                return backTypeObj[text] || '';
            }
        },
        { title: '还款金额', dataIndex: 'totalMoney', key: 'totalMoney' },
        // { title: '还款状态', dataIndex: 'state', key: 'state' },
        { title: '交易流水号',dataIndex: 'payTradeNo', key: 'payTradeNo' },
        // { title: '入账时间', dataIndex: 'billTime', key: 'billTime' },
        { title: '催收人', dataIndex: 'collectorName', key: 'collectorName' }
    ];
    constructor(props) {
        super(props);
        this.state = {};
        this.searchParams = {};
    }
    //分页
    handlePageChange = (info) => {
        //todo 分页测试
         const { current, pageSize } = info;
         const { getTableData } = this.props;
         getTableData({ ...this.searchParams, pageNum: current, pageSize });
    }

    //搜索
    handleSearch = (obj) => {
        const { getTableData } = this.props;
        const params = convertParams(obj);
        getTableData({ ...params, pageSize: 10, pageNum: 1 });
        this.searchParams = params;
    }

    componentDidMount() {
        const { getTableData } = this.props;
        getTableData({ pageSize: 10, pageNum: 1 });
    }

    render() {
        const { tableData: { data, pagination }, loading } = this.props;
        return (
            <div>
                <SearchList handleSubmit={this.handleSearch}/>
                <CommonTable
                    loading={loading}
                    pagination={pagination}
                    dataSource={data}
                    handlePageChange={this.handlePageChange}
                    columns={this.columns}
                />
            </div>
        );
    }

}
const mapStateToProps = (state) => {
    const { afterLoanManageState: { overdueBackRecordState } } = state;
    return {
        tableData: overdueBackRecordState['data'],
        loading: overdueBackRecordState['loading']
    };
}
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: overdueBackRecordAction.obrGetTableData
    }, dispatch);

}
export default connect(mapStateToProps, mapDispatchToProps)(OverdueBackRecord);